<template>
  <div>

    <transition name="headerAni">

      <x-header :left-options="{backText: ''}" key="normal" class="c-header"
                v-if="common_header === 1 || common_header === 3"
                style="width:100%;position:absolute;left:0;top:0;z-index:100;">
        <router-link to="/">
          <img class="c-header-logo" style="width: 100px;position: relative;top: 2px;" src="static/img/logo.png" alt="">
        </router-link>

        <span class="" slot="overwrite-left" @click="swtichDrawer" style="color: rgba(237, 143, 37, 0.9);font-size: 0.20rem">
            商品库
        </span>

        <!--<x-icon slot="overwrite-left" type="navicon" size="35" style="fill:#f7a45b;position:relative;top:-8px;left:-3px;"></x-icon>-->



        <i @click="switchClassifyMode" v-if="common_header === 3" class="iconfont icon-qiehuan" slot="right"
           :class="{'c-header-right':classify_mode === 1,'c-header-right-active':classify_mode === 2}"></i>

        <div class="c-header-address" v-if="common_header === 1" @click="switchAddress" slot="right">
          <i class="iconfont jinjin-location"></i>
           <span class="">{{common_region.region_name}}</span>
        </div>

      </x-header>

      <x-header key="setting" class="c-header c-header_setting" :left-options="{backText: ''}"
                v-else-if="common_header === 2 || common_header === 5 || common_header === 6"
                style="width:100%;position:absolute;left:0;top:0;z-index:100;">
        <h3 class="c-header-title">
          总代理管理设置
        </h3>
        <i v-if="common_header === 5" @click="handleClickFliter" class="iconfont icon-shaixuan" slot="right"
           style="color: #fff;font-size: 18px"></i>
      </x-header>

      <x-header :left-options="{backText: ''}" id="normal_back" key="normal_back" class="c-header"
                v-if="common_header === 4" style="width:100%;position:absolute;left:0;top:0;z-index:100;">
        <router-link to="/">
          <img class="c-header-logo" style="width: 100px;position: relative;top: 2px;" src="static/img/logo.png" alt="">
        </router-link>
        <x-icon @click="swtichDrawer" slot="right" type="navicon" size="35"
                style="fill:#f7a45b;position:relative;top:-8px;left:-3px;">
        </x-icon>
      </x-header>

    </transition>

    <transition name="pageFade">
      <div class="c-header-AddressPage" v-show="AddressPage.state">
        <div class="AddressPage-title">
           <span>区域选择</span>
           <i class="iconfont jinjin-guanbi" @click="switchAddress"></i>
        </div>
        <div class="AddressPage-addressSelection">

          <div class="AddressPage-addressSelection-title">
             当前城市
           </div>

          <div class="AddressPage-addressSelection-currentArea">
             <span class="AddressPage-addressSelection-city AddressPage-addressSelection-city_nowCity">
                 {{common_region.region_name}}
             </span>
          </div>

          <div class="AddressPage-addressSelection-title" style="margin-top: 0.1rem">
            区域
          </div>

          <div class="AddressPage-addressSelection-cityList">

             <span class="AddressPage-addressSelection-city"@click="setRegion({region_id:0,parent_id:1,region_name:'全国'})">
                全国
             </span>
             <span @click="setRegion(item)" :key="item.region_id" class="AddressPage-addressSelection-city" v-for="item in AddressPage.items">
                 {{item.region_name}}
             </span>

          </div>

        </div>
      </div>
    </transition>

  </div>
</template>
<script>
  import {mapGetters, mapMutations} from "vuex";
  import {XHeader} from 'vux'
  import {getAreaList}from "api/index"
  import Bus from "common/js/bus"
  export default {
    data() {
      return {
        AddressPage:{
          state:false,
          items:[]
        }
      }
    },
    computed: {
      ...mapGetters(['drawer_state', 'common_header', 'classify_mode','common_region'])
    },
    methods: {
      swtichDrawer() {
        this.setDrawerState(!this.drawer_state)
      },
      switchClassifyMode() {
        //note:切换 类别页面的展示模式
        this.classify_mode === 1 ? this.setClassifyMode(2) : this.setClassifyMode(1);
      },
      handleClickFliter() {
        this.switchHeaderFilter();
      },
      switchAddress(){
          this.AddressPage.state = !this.AddressPage.state;
      },
      setRegion(Row){
          this.setCommonRegion(Row);
          this.$localStore.set("region",JSON.stringify(Row));
          this.$vux.alert.show({
            title:"提示",
            content:"切换成功,程序将重新加载",
            onHide(){
              Bus.$emit("loading-on");
              window.location.reload();
            }
          });
      },
      ...mapMutations({
        "setDrawerState": "SET_DRAWER_STATE",
        "setClassifyMode": "SET_CLASSIFY_MODE",
        "switchHeaderFilter": "SWITCH_HEADER_FILTER",
        "setCommonRegion":"SET_COMMON_REGION"
      })
    },
    components: {
      XHeader
    },
    mounted(){
      getAreaList().then(Rs =>{
        this.AddressPage.items = Rs;
      })
    }
  }
</script>
<style lang="less">
  .headerAni-enter-active {
    animation: fadeInUp 0.3s linear;
  }

  .headerAni-leave-active {
    animation: fadeOutDown 0.3s linear;
  }

  .pageFade-enter-active{
    animation: fadeIn 0.3s;
  }
  .pageFade-leave-active{
    animation: fadeOut 0.3s;
  }
  .c-header{
    &-right {
      font-size: 24px;
      color: #ccc;
      &-active {
        color: rgb(247, 164, 91);
      }
    }
    &-address{
      color: #666;
      i{
        font-size: 0.24rem;
        color: rgba(237,143,37,0.9);
      }
      span{
        font-size: 0.24rem;
        position: relative;
        top: -0.02rem;
      }
    }
    &-AddressPage{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10086;
      background: rgba(243, 243, 243,0.9);

      .AddressPage-title{
        height: 0.8rem;
        line-height: 0.8rem;
        padding: 0 0.3rem;
        position: relative;
        text-align: center;
        color: #333;
        font-size: 0.32rem;
        letter-spacing: 0.01rem;
        z-index: 10086;
        box-shadow: 0 0 10px #ccc;
        background: #fff;
        i{
          font-weight: 600;
          color:rgb(247, 164, 91);
          position: absolute;
          right: 0.3rem;
        }
      }

      .AddressPage-addressSelection{
        padding: 0 0.3rem;
        position: absolute;
        top: 0.8rem;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-x: hidden;
        overflow-y: auto;

        &-title{
          padding: 0.2rem 0;
          color: #B3B3B3;
        }

        &-currentArea{
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
        }

        &-city{
          display: inline-block;
          padding: 0.15rem 0.3rem;
          background: #fff;
          border: 1px solid #E6E6E6;
          font-size: 16px;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 20%;
          margin-right: 0.19rem;
          margin-bottom: 0.2rem;
          &:nth-child(3n+0){
            margin-right: 0;
          }
          &_nowCity{
            width: auto;
            max-width: 80%;
            margin-bottom: 0;
          }
        }

        &-cityList{
          display: flex;
          flex-wrap: wrap;
        }
      }
    }

  }

  #normal_back {
    .vux-header-left {

    }
    .vux-header-back {
      color: rgb(247, 164, 91);
    }
    .left-arrow {
      &:before {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border: 1px solid rgb(247, 164, 91);
        border-width: 2px 0 0 2px;
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
        top: 8px;
        left: 7px;
      }
    }
  }
</style>
